/*
 * @Author: 
 * @Date: 2022-02-10 11:48:50
 * @LastEditors: lqj
 * @LastEditTime: 2022-02-14 14:02:49
 * @Description: react-redux
 */
import CountCenter from "./components/CountCenter";
import { createIncrease, createIncreaseAsync, createClear } from '../../redux/module/count_redux'

/**
 * connect()返回一个函数
 * connect()(component)接受一个组件作为参数，该组件是一个ui组件
 * connect(mapStateToProps, mapDispatchToProps)接收两个函数作为参数
 * mapStateToProps()：该函数的返回值作为状态传递给了ui组件，返回值以对象的形式存在
 * 存在一个参数state，用于获取状态，store.getState()
 * mapDispatchToProps()：该函数的返回值作为操作状态的方法传递给了ui组件，返回值以对象的形式存在，对象值是一个方法
 * 存在一个参数dispatch，用于操作状态，store.dispatch(action)
*/
import {connect} from 'react-redux'
const mapStateToProps = (state) => ({count: state.total})
const mapDispatchToProps = (dispatch) => ({
  handleCount: (val, count) => {
    switch (val) {
      case 'odd':
        dispatch(createIncrease(count))
        break;
      case 'async':
        dispatch(createIncreaseAsync(count, 700))
        break;
      case 'clear':
        dispatch(createClear(0))
        break;
      default:
        dispatch({ type: val, data: count })
        break;
    }
  }
})

export default connect(mapStateToProps, mapDispatchToProps)(CountCenter)
// export default connect(
//   state => ({count: state}),
//   dispatch => ({
//     handleCount: (val, count) => {
//       switch (val) {
//         case 'odd':
//           dispatch(createIncrease(count))
//           break;
//         case 'async':
//           dispatch(createIncreaseAsync(count, 700))
//           break;
//         case 'clear':
//           dispatch(createClear(0))
//           break;
//         default:
//           dispatch({ type: val, data: count })
//           break;
//       }
//     }
//   })
// )(CountCenter)

// mapDispatchToProps可以是一个对象，并且react-redux会把action自动dispatch
// export default connect(
//   state => ({count: state}),
//   {
//     handleCountIncrease: createIncrease,
//     handleCountIncreaseAsync: createIncreaseAsync,
//     handleCountClear: createClear,
//   }
// )(CountCenter)
